<template>
    <div>
        <el-header>
            <headers1>
                <h4 slot="title">确认订单</h4>
            </headers1>
        </el-header>
        <el-main style="margin-top:1rem;">

            <el-row>
                <el-card shadow="never">
                    <div slot="header">
                        <span>地址</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="addAddress">新增地址</el-button>
                    </div>
                    <el-table :data="addresses" style="width: 100%" ref="singleTable" highlight-current-row
                        :show-header="false" @current-change="handleCurrentChange">
                        <el-table-column width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column width="180">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.phone }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.address }}</span>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-card>
            </el-row>

            <el-row style="margin-top:1rem;">
                <el-card shadow="never">
                    <div slot="header">
                        <span>商品列表</span>
                    </div>
                    <el-table ref="multipleTable" :data="shoppingcartlist" style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column label="商品" width="400">
                            <template slot-scope="scope">
                                <el-row>
                                    <el-col :span="3">
                                        <img :src="scope.row.commodity.listPic" style="width:50px;height:50px;">
                                    </el-col>
                                    <el-col :offset="1" :span="19">
                                        <p>{{scope.row.commodity.commodityName}}</p>
                                    </el-col>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column prop="commodity.price" label="价格" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="num" label="数量" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column label="小计">
                            <template slot-scope="scope">
                                {{scope.row.num*scope.row.commodity.price}}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-row>
            <el-row style="margin-top:20px;">
                <el-card shadow="never">
                    <el-row>
                        <el-col :span="12">
                            总计：{{total}}
                        </el-col>
                        <el-col :span="12" style="text-align:right;">
                            <el-button type="danger" @click="clearshoppingcart">立即支付</el-button>
                        </el-col>
                    </el-row>
                </el-card>
            </el-row>

        </el-main>
        <el-dialog v-if="dialogVisible" title="支付" :visible.sync="dialogVisible" width="25%" :before-close="cancelpay">
            <el-tabs v-model="activeName" type="card" style="height:350px;">
                <el-tab-pane label="余额支付" name="first">
                    <p>
                        <i class="el-icon-coin" style="font-size:20px;color:#c59337;"></i>
                        <span>{{$store.state.user.money}}</span>
                    </p>
                    <el-row style="margin-top:3rem;">
                        <el-col :span="3" :offset="4">
                            订单号：
                        </el-col>
                        <el-col :span="14">
                            {{commodityorder.id}}
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:1rem;">
                        <el-col :span="3" :offset="4">
                            订单金额：
                        </el-col>
                        <el-col :span="14">
                            {{commodityorder.total}}
                        </el-col>
                    </el-row>
                    <el-row style="margin-top:5rem;">
                        <el-col :offset="10" v-if="parseInt($store.state.user.money)>parseInt(commodityorder.total)">
                            <el-button type="success" @click="pay">确定支付</el-button>
                        </el-col>
                        <el-col :offset="10" v-if="parseInt($store.state.user.money)<parseInt(commodityorder.total)">
                            <el-button type="success" disabled>余额不足</el-button>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="支付宝或微信" name="second" disabled></el-tab-pane>
                <el-tab-pane label="银行卡支付" name="third" disabled></el-tab-pane>
            </el-tabs>
        </el-dialog>
        <el-dialog title="新增或编辑地址" :visible.sync="addressdialogVisible" width="30%">
                <el-form label-width="80px" :model=" addressForAdd">
                    <el-form-item label="姓名">
                        <el-input v-model="addressForAdd.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="addressForAdd.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="addressForAdd.address"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addressdialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<style scoped>

</style>

<script>
    import headers1 from '@/components/headers1.vue'
    export default {
        data: () => {
            return {
                addresses: [],
                shoppingcartlist: [],
                address: {},
                commodityorder: '',

                dialogVisible: false,
                activeName: 'first',

                addressdialogVisible:false,
                addressForAdd: {
                    name: '',
                    phone: '',
                    address: ''
                },

            }
        },
        components: {
            headers1
        },
        methods: {
            addAddress(){
                this.addressdialogVisible=true
            },
            submit(){
                let token = localStorage.getItem('token')
                    this.$axios.post(this.$store.state.base_url + "/address/?token=" + token, this.addressForAdd).then(
                        data => {
                            if (data.data.code == "SUCCESS") {
                                this.$message({
                                    message: '新增地址成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(data.data.message);
                            }
                            this.addresses.push(this.addressForAdd)
                            this.addressForAdd={
                                name: '',
                                phone: '',
                                address: ''
                            }
                            this.address=data.data.data
                            this.addressdialogVisible = false
                        })
            },
            handleSelectionChange(selection) {
                console.log(selection)
            },
            setCurrent(row) {
                this.$refs.singleTable.setCurrentRow(row);
            },
            handleCurrentChange(val) {
                this.address = val
            },
            clearshoppingcart() {
                let token = localStorage.getItem('token')
                if (token != null) {
                    if (this.$route.query.from == "shoppingcart") {
                        // 清空购物车
                        this.$axios.post(this.$store.state.base_url + "/order/fromshoppingcart?token=" + token +
                            "&addressId=" + this.address.id).then(data => {
                            console.log(data)
                            if (data.data.code == "SUCCESS") {
                                this.commodityorder = data.data.data.commodityorder
                                this.dialogVisible = true
                            } else {
                                this.$message.error(data.data.message);
                            }
                        })
                    }else{
                        let obj={
                            commodityId:this.$route.query.id,
                            commodityNum:this.$route.query.num
                        }
                        this.$axios.post(this.$store.state.base_url + "/order/fromdetail?token=" + token +
                            "&addressId=" + this.address.id,obj).then(data=>{
                                if (data.data.code == "SUCCESS") {
                                this.commodityorder = data.data.data.commodityorder
                                this.dialogVisible = true
                                } else {
                                    this.$message.error(data.data.message);
                                }
                            })
                    }

                } else {
                    this.$message.error("token过期，请重新登陆");

                }
            },
            pay() {
                let token = localStorage.getItem('token')
                if (token != null) {
                    //支付
                    let obj = {
                        commodityorderId: this.commodityorder.id,
                        mode: 1
                    }
                    this.$axios.post(this.$store.state.base_url + "/payment/?token=" + token, obj).then(data => {
                        if (data.data.code == "SUCCESS") {
                            this.$message({
                                message: '支付成功',
                                type: 'success'
                            });
                            this.$store.commit("setUserMoney",parseInt(this.$store.state.user.money)-parseInt(this.commodityorder.total))
                            this.$router.push("personalcenter")
                        } else {
                            this.$message.error(data.data.message);
                        }
                    })

                } else {
                    this.$message.error("token过期，请重新登陆");

                }
            },
            cancelpay(){
                this.dialogVisible=false
                this.$message({
                    type: 'info',
                    message: "已取消支付，可在个人中心查看订单，并完成支付"
                });
                this.$router.push("personalcenter")
            }
        },
        mounted() {

            let token = localStorage.getItem('token')
            if (token != null) {
                //获取地址信息
                this.$axios.get(this.$store.state.base_url + "/address/?token=" + token).then(data => {
                    
                    this.addresses = data.data.data
                    //默认选中第一条数据
                    this.$refs.singleTable.setCurrentRow(this.addresses[0])
                })
                //获取商品信息
                if (this.$route.query.from == "shoppingcart") {
                    //从更新后的购物车提数据
                    this.$axios.get(this.$store.state.base_url + '/shoppingcart/findallwithcommodity?token=' + token)
                        .then(
                            data => {
                                let shoppingcartlist = data.data.data
                                this.shoppingcartlist = shoppingcartlist
                                if (shoppingcartlist.length == 0) {
                                    this.$router.push("index")
                                }

                            })
                }else{
                    let id = this.$route.query.id
                    this.$axios.get(this.$store.state.base_url + '/commodity/' + id).then(data => {
                        //this.commodity = data.data
                        console.log(data.data)
                        let obj={}
                        obj.commodity=data.data
                        obj.num=this.$route.query.num
                        this.shoppingcartlist.push(obj)
                    })
                }

            } else {
                this.$message.error("请先进行登陆");
                this.$router.push("login")
            }
        },
        computed: {
            "total": function () {
                let total = 0
                for (const iterator of this.shoppingcartlist) {
                    total += iterator.num * iterator.commodity.price
                }
                return total
            }
        }
    }
</script>